<template>
	<view class="swiperDot">
		<swiper class="swiper" circular indicator-active-color="#fff" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in info.images" :key="index">
				<image :src="item" mode="aspectFill" @click="toPre(item)"></image>
			</swiper-item>
		</swiper>
		<view class="return" @click="toReturn()">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="detail">
			<view class="title">{{info.name}}</view>

			<view class="flex clock" v-if="info.open_time!=''">
				<view><u-icon name="clock" color="" size="20"></u-icon></view>
				<view style="margin-left: 5rpx;">营业时间：{{info.open_time}}</view>
			</view>
			<!-- <view class="flex clock" v-if="info.telephone!=''" @click="toCall()">
				<view><u-icon name="phone" color="" size="22"></u-icon></view>
				<view>联系方式：{{info.telephone}}</view>
			</view> -->
			<view class="flex clock rule" v-if="info.reservation_rule&&info.reservation_rule!=''">
				<!-- <view><u-icon name="calendar" color="" size="22"></u-icon></view> -->
				<view>预约规则：{{info.reservation_rule}}</view>
			</view>
			<view class="map flex align between">
				<image src="/static/bg.png" class="bg"></image>
				<view class="address">{{info.address}}</view>
				<view class="flex align map-item">
					<view class="item" v-if="info.telephone!=''" style="margin-right: 20rpx;" @click="toCall()">
						<image src="/static/icon2.png"></image>
						<view>联系方式</view>
					</view>
					<view class="item" @click="toMap()">
						<image src="/static/icon3.png"></image>
						<view>查看地图</view>
					</view>
				</view>
			</view>

		</view>
		<view class="tabNav flex align between" style="margin-bottom: 1rpx;">
			<view @click="toNavAct(1)" :class="tabNavAct==1?'tabNavAct':''">{{title}}介绍</view>
			<view @click="toNavAct(4)" :class="tabNavAct==4?'tabNavAct':''">{{title}}图片</view>
			<view @click="toNavAct(2)" :class="tabNavAct==2?'tabNavAct':''" v-if="info.price_desc!=''">{{title2}}</view>
			<view @click="toNavAct(3)" :class="tabNavAct==3?'tabNavAct':''" v-if="info.tags.length!=0">{{title}}服务
			</view>
		</view>
		<view class="content" v-if="info.content!=''" id="targetView1">
			<view class="list-tit">
				<image src="/static/index/bg1.png" mode="widthFix"></image>
				<view>{{title}}介绍</view>
			</view>
			<!-- <view class="parse" id="parse" :style="zhan?'height:auto':'height:400rpx'"> -->
			<view class="parse" id="parse" :style="zhan?'height:auto':'height:400rpx'">
				<u-parse :content="info.content"></u-parse>
			</view>
			<!-- <view v-if="zhanS">
				<view class="parseTab flex align" @click="zhan = true" v-if="!zhan">展开更多<u-icon
						name="arrow-down"></u-icon></view>
				<view class="parseTab flex align" @click="zhan = false" v-if="zhan">收起<u-icon name="arrow-up"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="content" style="margin-top: 20rpx;" id="targetView4">
			<view class="list-tit">
				<image src="/static/index/bg1.png" mode="widthFix"></image>
				<view>{{title}}图片</view>
			</view>
			<view v-for="(item,index) in info.images" :key="index">
				<image class="img" :src="item" mode="widthFix" @click="toPre(item)"></image>
			</view>
		</view>
		<view class="content" style="margin-top: 20rpx;" v-if="info.price_desc!=''" id="targetView2">
			<view class="list-tit">
				<image src="/static/index/bg1.png" mode="widthFix"></image>
				<view>{{title2}}</view>
			</view>
			<view class="parse">
				<u-parse :content="info.price_desc"></u-parse>
			</view>
		</view>
		<view class="content" style="margin-top: 20rpx;" v-if="info.tags.length!=0" id="targetView3">
			<view class="list-tit">
				<image src="/static/index/bg1.png" mode="widthFix"></image>
				<view>{{title}}服务</view>
			</view>
			<view class="parse">
				<view class="tags flex align">
					<view v-for="(item,index) in info.tags" :key="index">{{item}}</view>
				</view>
			</view>
		</view>

		<!-- <button class="bto-btn">去预约</button> -->
		<!-- <view @click="toMiniProgram()" v-if="info.jump_app_type==1&&info.is_jump==1">去预约</view> -->
		<view class="bto-btn" @click="toUrl()" v-if="info.is_jump==1&&info.jump_config.wx_gzh.link!=''">
			<view>去预约</view>
		</view>
		<view class="bto-btn" @click="toUrl()" v-if="info.is_jump==1&&info.jump_config.wx_miniprogram.link!=''">
			<view>去预约</view>
		</view>
		<view class="bto-btn2" @click="toCall()"
			v-if="info.is_jump==1&&info.jump_app_type==0&&info.jump_config.wx_gzh.link==''">
			<view>{{title}}预约电话：{{info.telephone}}
				<!-- <text>线上预约程序完善中，敬请期待</text> -->
			</view>
		</view>
		<view class="bto-btn" v-if="info.is_jump==0">
			<view>无需预约</view>
		</view>
		<!-- 返回顶部按钮 -->
		<view class="back-to-top" style="bottom: 250rpx;" v-if="showBack" @click="handleTop">
			<image src="/static/top.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		culturalDetail,
		config
	} from '@/api/apiData.js';

	export default {
		data() {
			return {
				weChart: true,
				title: '场馆',
				title2: '场馆价格',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				id: '',
				info: {
					tags: []
				},
				position: {
					name: '',
					longitude: '',
					latitude: ''
				},
				type: 1,
				height: 20,
				zhan: true,
				zhanS: true,
				tabNavAct: 1,
				showBack: false,
				ws: null,
				path: '/pages/cultural/detail'
			};
		},
		onLoad(option) {
			this.id = option.id
			if (option.type) {
				this.type = option.type
			}
			this.getDetail()

		},
		onShareAppMessage(){},
		mounted() {},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
			// 监听页面滚动事件
			if (e.scrollTop >= 100) {
				this.showBack = true; // 滚动距离超过100px时显示返回顶部按钮
			} else {
				this.showBack = false; // 否则隐藏返回顶部按钮
			}
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			this.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			toMiniProgram() {
				wx.navigateToMiniProgram({
					appId: 'info.jump_config.wx_miniprogram.appid', // 必填，要跳转的目标小程序的appId
					path: 'info.jump_config.wx_miniprogram.link', // 必填，打开的页面路径，如果留空则打开首页
					success(res) {
						// 打开成功的回调
						console.log('打开成功');
					}
				})
			},
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				uni.connectSocket({
					url: wsUrl,
					success: function(res) {
						console.log('WebSocket连接成功');
						that.sendData({
							type: 'page_enter',
							path: that.path,
							params: ""
						});
					},
					fail: function(err) {
						console.error('WebSocket连接失败', err);
					}
				});
			},
			// 发送
			sendData(data) {
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: function(res) {
						console.log('消息发送成功');
					},
					fail: function(err) {
						console.error('消息发送失败', err);
					}
				});
			},
			handleTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部
					duration: 300 // 滚动动画持续时间，单位为毫秒
				});
			},
			toNavAct(n) {
				this.tabNavAct = n
				if (n == 1) {
					// 假设你的目标view有一个id为"targetView"
					uni.createSelectorQuery().select('#targetView1').boundingClientRect(function(rect) {
						if (rect) {
							uni.pageScrollTo({
								scrollTop: rect.top, // 滚动到目标view的顶部位置
								duration: 300 // 滚动动画的时长，单位ms
							});
						}
					}).exec();
				}
				if (n == 2) {
					// 假设你的目标view有一个id为"targetView"
					uni.createSelectorQuery().select('#targetView2').boundingClientRect(function(rect) {
						if (rect) {
							uni.pageScrollTo({
								scrollTop: rect.top, // 滚动到目标view的顶部位置
								duration: 300 // 滚动动画的时长，单位ms
							});
						}
					}).exec();
				}
				if (n == 3) {
					// 假设你的目标view有一个id为"targetView"
					uni.createSelectorQuery().select('#targetView3').boundingClientRect(function(rect) {
						if (rect) {
							uni.pageScrollTo({
								scrollTop: rect.top, // 滚动到目标view的顶部位置
								duration: 300 // 滚动动画的时长，单位ms
							});
						}
					}).exec();
				}
				if (n == 4) {
					// 假设你的目标view有一个id为"targetView"
					uni.createSelectorQuery().select('#targetView4').boundingClientRect(function(rect) {
						if (rect) {
							uni.pageScrollTo({
								scrollTop: rect.top, // 滚动到目标view的顶部位置
								duration: 300 // 滚动动画的时长，单位ms
							});
						}
					}).exec();
				}

			},
			async initWxConfig() {
				const result = await config()
				if (result.code == 1) {
					wx.config({
						debug: result.data.debug, // 生产环境设置为 false
						appId: result.data.config.appId,
						timestamp: result.data.config.timestamp,
						nonceStr: result.data.config.nonceStr,
						signature: result.data.config.signature,
						jsApiList: result.data.config.jsApiList,
						openTagList: ['wx-open-launch-weapp']
					});

					wx.ready(() => {
						// alert("微信 JS SDK 已就绪");
					});

					wx.error((err) => {
						// alert("微信 JS SDK 配置错误：", err);
					});
				} else {

				}


			},
			toUrl() {
				let jump_config = this.info.jump_config
				if (this.info.jump_app_type == 1) {
					uni.navigateToMiniProgram({
						appId: jump_config.wx_miniprogram.appid,
						path: jump_config.wx_miniprogram.link,
						success(res) {
							console.log('跳转成功');
						}
					})
				} else {
					let url = 'https://gxtravel.ncscloudmedia.com/gxyy/#/index'
					let id = this.info.id
					uni.reLaunch({
						url:'/pages/webview/webview?src='+url+'&id='+id
					})
					// uni.navigateTo({
					// 	url:'/pages/webview/webview?src='+jump_config.wx_gzh.link
					// })
					// window.location.href = this.info.jump_config.wx_gzh.link
				}
			},
			toReturn() {
				uni.navigateBack()
			},
			toPre(i) {
				let images = this.info.images
				uni.previewImage({
					urls: images,
					current: i
				})
			},
			async getDetail() {
				const result = await culturalDetail({
					cultural_center_id: this.id
				})
				if (result.code == 1) {
					this.info = result.data
					this.position.name = result.data.address
					this.position.longitude = result.data.longitude
					this.position.latitude = result.data.latitude
					if (result.data.id == 35 || result.data.id == 36 || result.data.id == 37 || result.data.id == 38 ||
						result.data.id == 39 || result.data.id == 40 || result.data.id == 41 || result.data.id == 42 ||
						result.data.id == 43) {
						this.title = '书屋'
						this.title2 = '使用指南'
					}
					// let that = this
					// this.$nextTick(() => {
					// 	const query = uni.createSelectorQuery();
					// 	query.select('#parse').boundingClientRect(data => {
					// 		console.log('View Height:', data.height);
					// 		if (data.height > 220) {
					// 			that.zhan = false
					// 			that.zhanS = true
					// 		}else{
					// 			that.zhan = true
					// 			that.zhanS = false
					// 		}
					// 	}).exec();
					// });
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toCall() {
				let phone = this.info.telephone
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 选择地图
			toMap() {
				let that = this
				let {
					position,
					info
				} = that;
				wx.openLocation({
					latitude: parseFloat(position.latitude), // 纬度，浮点数，范围为90 ~ -90
					longitude: parseFloat(position.longitude), // 经度，浮点数，范围为180 ~ -180。
					name: info.name, // 位置名
					address: position.name, // 地址详情说明
					scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
					infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				});
				// uni.showActionSheet({
				// 	itemList: ['高德地图', '百度地图', '腾讯地图'],
				// 	success: function(res) {
				// 		that.guide(res.tapIndex)
				// 	},
				// 	fail: function(res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
			},
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});
				let {
					position
				} = this;
				let that = this
				if (position.name && position.name != '') {
					//地点位置position.name 地点经纬度lng lat
					var lng = position.longitude; //经度39.9
					var lat = position.latitude; //纬度116.4
					if (signMap == 0) {
						// 高德地图
						console.log('000')
						console.log(position.name, lng, lat, '1111')
						uni.getSystemInfo({

							success: (res) => {
								console.log(res)
								if (res.platform == "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// // 百度地图
						let newPo = that.txMapToBdMap(lng, lat)
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform == "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + newPo.lat + "&lon=" + newPo.lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + newPo
												.lat +
												"," + newPo.lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + newPo.lat + "&lon=" + newPo.lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + newPo
												.lat +
												"," + newPo.lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// // 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform == "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该地点位置',
						icon: 'none',
						duration: 2000,
					});
				}
			},
			/**
			 * 腾讯地图转百度地图经纬度
			 * @param {Number} lat
			 * @param {Number} lng
			 * @returns
			 */
			txMapToBdMap(lng, lat) {
				let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
				let x = lng;
				let y = lat;
				let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta) + 0.0065;
				let lats = z * Math.sin(theta) + 0.006;

				return {
					lng: lngs,
					lat: lats,
				};
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7FB;
		padding-bottom: 280rpx;
	}

	.tabNav {
		position: relative;
		background: white;
		z-index: 1;

		view {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			position: relative;
		}

		.tabNavAct::after {
			position: absolute;
			bottom: 0;
			content: '';
			width: 80rpx;
			height: 18rpx;
			border-radius: 14rpx;
			background: #12D5B4;
			left: 50%;
			margin-left: -40rpx;
			bottom: 20rpx;
			z-index: -1;

		}
	}

	.swiper {
		height: 510rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bto-btn2 {
		background: white;
		padding: 24rpx 0 88rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 1rpx 2rpx 2rpx 5rpx gainsboro;
		z-index: 2;

		view {
			background: #12D5B4;
			border-radius: 48rpx;
			text-align: center;
			color: white;
			margin: 0 30rpx;
			font-size: 36rpx;
			padding: 20rpx 0;
		}

		text {
			display: block;
		}
	}

	.tags {
		flex-wrap: wrap;

		view {
			background: #f2f2f3;
			border-radius: 12rpx;
			color: grey;
			font-size: 30rpx;
			padding: 10rpx 18rpx;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
		}
	}

	.detail {
		background: white;
		padding: 16rpx 30rpx;
		position: relative;
		top: -20rpx;
		border-radius: 20rpx;

		.title {
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}



		.clock {
			color: #6C7A94;
			font-size: 24rpx;
			margin-top: 16rpx;
			margin-bottom: 20rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
		}

		.rule {
			color: #ed1d1d;
			font-weight: bold;
			font-size: 14px;
		}

		.map {
			position: relative;
			padding: 10rpx 30rpx;

			.address {
				font-size: 28rpx;
				width: 66%;
			}

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.item {
				color: #00AF91;
				font-size: 24rpx;
				text-align: center;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}

	}

	.content {
		background: white;
		padding: 0 30rpx 20rpx;

		.list-tit {
			position: relative;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			padding-top: 20rpx;

			view {
				position: absolute;
				color: #00AF91;
				font-size: 38rpx;
				left: 0;
				bottom: 0;
			}

			image {
				width: 152rpx;
				height: 84rpx;

			}
		}

		.img {
			width: 100%;
		}

		.parse {
			overflow: hidden;
		}

		.parseTab {
			justify-content: center;
			color: gray;
			font-size: 28rpx;
		}
	}
</style>